<template>
	<view  :style="colorStyle">
		<view class="address">
			<view class="address_info">
				<view class="">
					<text class="name">{{ orderInfo.real_name || '' }}</text>
					<text>{{ orderInfo.user_phone || '' }}</text>
				</view>
				<view class="addr">
					{{ orderInfo.user_address || '' }}
				</view>
			</view>
			<view class="line">
				<image src="/static/images/line.jpg"></image>
			</view>
		</view>
		<view class="goods">
			<view class="title_hd">兑换商品</view>
			<view class="body" v-for="(item, index) in orderInfo.cartInfo">
				<image class="pic" :src="item.productInfo.image" mode="aspectFill"></image>
				<view class="content">
					<view class="title text-cut-2">{{ item.productInfo.store_name }}</view>
					<view class="spu">
						<text>{{ item.productInfo.attrInfo.suk }}</text>
						<!-- <text>尺码：165/88A</text> -->
					</view>
				</view>
			</view>
		</view>
		<view class="other">
			<view class="acea-row row-middle row-between">
				<text>订单编号：</text>
				<view class="acea-row row-middle">
					<text>{{ orderInfo.order_id }}</text>
					<text class="copy_btn" @click="onCopy('1')">复制</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between">
				<text>下单时间：</text>
				<view class="acea-row">
					<text>{{ orderInfo._add_time }}</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between">
				<text>支付积分：</text>
				<view class="acea-row">
					<text>{{ orderInfo.pay_integral }}</text>
				</view>
			</view>
			<view class="acea-row row-middle row-between" v-if="orderInfo.delivery_id">
				<text>物流编号：</text>
				<view class="acea-row row-middle">
					<text>{{ orderInfo.delivery_id }}</text>
					<text class="copy_btn" @click="onCopy('2')">复制</text>
				</view>
			</view>
		</view>
		
		<view class="fixed">
			<button class="btn" @click="callPhone">客服电话</button>
			<button class="btn" @click="onRefund">退货/退款</button>
			<button v-if="orderInfo.delivery_id" class="btn bg" @tap="goPage(1, `/pages/goods/goods_logistics/index?orderId=${orderInfo.order_id}`)">查询物流</button>
		</view>
		
		<refundPopup :refundData='refundReason' @changeClose='changeClose' @selectInfo='selectInfo'></refundPopup>
	</view>
</template>

<script>
	import {
		ordeRefundReason,
		getOrderDetail
	} from '@/api/order.js';
	import colors from '@/mixins/color.js';
	import { openOrderRefundSubscribe } from '@/utils/SubscribeMessage.js';
	import refundPopup from './components/refundPopup/index.vue'
	export default {
		components: {
			refundPopup
		},
		data() {
			return {
				orderId: '',
				orderInfo: {
					order_id: '',
					real_name: '',
					user_phone: '',
					user_address: '',
					cartInfo: [],
					_add_time: '',
					delivery_id: ''
				},
				refundItem: '',
				refundReason:{
				   RefundArray: [],
				   show:false
				},
			};
		},
		mixins:[colors],
		onLoad(option) {
			this.orderId = option.orderId
			this.loadData()
			// this.getRefundReason()
		},
		methods: {
			loadData() {
				getOrderDetail(this.orderId).then(res => {
					this.orderInfo = res.data
				})
			},
			/**
			 * 获取退款理由
			 */
			getRefundReason: function() {
				let that = this;
				ordeRefundReason().then(res => {
					that.$set(that.refundReason, 'RefundArray', res.data);
					this.refundItem = res.data[0];
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '4008106188'
				})
			},
			onCopy(type) {
				let txt = ''
				if(type == 1) {
					txt = this.orderInfo.order_id
				}
				if(type == 2) {
					txt = this.orderInfo.delivery_id
				}
				uni.setClipboardData({
					data: txt
				})
			},
			goPage(type, url) {
				if (type == 1) {
					uni.navigateTo({
						url
					});
				} else if (type == 2) {
					uni.switchTab({
						url
					});
				} else if (type == 3) {
					uni.navigateBack();
				}
			},
			onRefund() {
				// this.refundReason.show = true;
				this.openSubcribe(this.orderInfo.cartInfo[0], this.orderInfo.product_type)
			},
			openSubcribe: function (item, productType) {
				let cartIds = [
					{
						cart_id: item.id,
						cart_num: parseInt(item.cart_num) - parseInt(item.refund_num)
					}
				];
				cartIds = JSON.stringify(cartIds);
				let page = `/pages/goods/goods_return/index?orderId=` + this.order_id + '&id=' + this.orderInfo.id + '&cartIds=' + cartIds + '&productType=' + productType;
				// #ifdef MP
				uni.showLoading({
					title: '正在加载'
				});
				openOrderRefundSubscribe()
					.then((res) => {
						uni.hideLoading();
						uni.navigateTo({
							url: page
						});
					})
					.catch(() => {
						uni.hideLoading();
					});
				// #endif
				// #ifndef MP
				uni.navigateTo({
					url: page
				});
				// #endif
			},
			changeClose(){
				this.refundReason.show = false;
			},
			selectInfo(e){
				this.refundItem = this.refundReason.RefundArray[e];
				this.changeClose();
			},
		}
	}
</script>

<style lang="less">
.address {
	background-color: #fff;
	margin-bottom: 20rpx;
	margin-top: 20rpx;
	.address_info {
		padding: 30rpx;
		font-size: 30rpx;
		.name {
			margin-right: 40rpx;
		}
		.addr {
			color: #999;
			font-size: 24rpx;
			margin-top: 10rpx;
		}
	}
	.line {
		width: 100%;
		margin: auto;
		height: 3rpx;
	}
	
	.line image {
		width: 100%;
		height: 100%;
		display: block;
	}
}

.goods {
	padding: 30rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	.body {
		display: flex;
		padding: 30rpx 0 0;
		.pic {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
		.content {
			width: calc(100% - 140rpx);
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			// justify-content: space-between;
			.title {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 10rpx;
			}
			.spu {
				color: #999;
				font-size: 20rpx;
			}
		}
	}
}
.other {
	background-color: #fff;
	padding: 30rpx;
	.acea-row {
		&:not(:last-child) {
			margin-bottom: 20rpx;
		}
		.acea-row {
			color: #999;
		}
		.copy_btn {
			display: inline-block;
			width: 68rpx;
			height: 36rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 36rpx;
			font-size: 20rpx;
			border: 1px solid #ccc;
			margin-left: 10rpx;
		}
	}
}
.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	z-index: 10;
	padding: 20rpx 30rpx;
	justify-content: flex-end;
	background-color: #fff;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
	.btn {
		padding: 10rpx 30rpx;
		font-size: 24rpx;
		border: 1px solid #ddd;
		color: #999;
		border-radius: 70rpx;
		margin-left: 20rpx;
		line-height: 35rpx;
	}
	.bg {
		color: #fff;
		background-color: var(--view-theme);
		border-color: var(--view-theme);
	}
}
</style>
